<template>
  <div>
    <h1>{{ $route.meta.title }}</h1>
    <el-form label-position="right" label-width="80px">
      <el-form-item label="商品名称">
        <el-input :value="data.name"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input :value="data.subtitle"></el-input>
      </el-form-item>
      <el-form-item label="当前状态">
        <el-input :value="data.status == 1 ? '在售' : '已下架'"></el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-select
          :value="value"
          popper-class="active common"
          placeholder="请选择"
        >
          <el-option
            v-for="item in option"
            :label="item.label"
            :value="item.id"
            :key="item.value"
            >{{ item.name }}
          </el-option>
        </el-select>

        <el-select
          v-if="second.length"
          :value="value2"
          popper-class="active"
          placeholder="请选择"
        >
          <el-option
            v-for="item in second"
            :label="item.label"
            :value="item.id"
            :key="item.value"
            >{{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="商品价格">
        <el-input :value="data.price">
          <el-button slot="append">元</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input :value="data.stock">
          <el-button slot="append">件</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-image
          v-for="(item, index) in subImage"
          :key="index"
          :src="data.imageHost + item"
        ></el-image>
      </el-form-item>
      <el-form-item label="商品详情">
        <el-input v-html="data.detail"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { shopDetail, addShop } from "@/api/index.js";
export default {
  data() {
    return {
      data: {},
      option: [],
      second: [],
      value: "请选择一级品类",
      value2: "请选择二级品类",
      parentId: 0,
      categoryId: 0,
    };
  },
  created() {
    shopDetail({ productId: this.$route.query.id }).then((res) => {
      console.log(this.$route.query.id);
      console.log(res);
      this.data = res.data.data;
      this.categoryId = res.data.data.categoryId;

      if (res.data.data.parentCategoryId == 0) {
        this.parentId = res.data.data.categoryId;
      } else {
        this.parentId = res.data.data.parentCategoryId;
      }
    });
    //   一级品类
    addShop({ categoryId: 0 }).then((res) => {
      this.option = res.data.data;
      this.option.forEach((item) => {
        if (item.id == this.parentId) {
          this.value = item.name;
          console.log(this.value);
        }
      });
      //二级品类
      addShop({ categoryId: this.categoryId }).then((res) => {
        console.log(this.categoryId);
        this.second = res.data.data;
        this.second.forEach((item) => {
          if (item.id == this.categoryId) {
            console.log(1);
            this.value2 = item.name;
          }
        });
      });
    });
  },
  computed: {
    subImage() {
      if (this.data.subImages) {
        return this.data.subImages.split(",");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
h1 {
  font-weight: normal;
}
.el-form {
  width: 70%;
}
/deep/ {
  .el-select {
    margin: 0 10px;
    .el-input__inner {
      background-color: #ededed;
    }
  }
  .el-form-item {
    .el-image {
      width: 80px;
      height: 80px;
      margin: 0 10px;
      vertical-align: middle;
    }
  }
  .el-form-item:last-child {
    margin-top: 40px;
    p {
      margin: 0;
    }
  }
}
</style>